<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rbacPermission</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/webjars/zTree/3.5.15/css/zTreeStyle/zTreeStyle.css" />

    <script src="/webjars/vue/2.1.3/vue.js"></script>
    <script src="/webjars/zTree/3.5.15/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="/jquery.ajax.extend.js"></script>
</head>
<body>



<div class="container-fluid" style="margin: 5px 5px;"  id="rbacPermissionApp">


    <div id="rbacPermission-grid" v-show="showFlag === 'rbacPermission-grid'">
        <!--查询form stat-->
        <div class="row" >

            <form class="form-horizontal">


                <div class="form-group col-sm-4">
                    <div class="col-sm-4 control-label">name</div>
                    <div class="col-sm-8">
                        <input type="text" v-model="rbacPermissionSearchForm.name" class="form-control input-sm">
                    </div>
                </div>


                <div class="form-group col-sm-4">
                    <div class="col-sm-4 control-label">url</div>
                    <div class="col-sm-8">
                        <input type="text" v-model="rbacPermissionSearchForm.url" class="form-control input-sm">
                    </div>
                </div>


                <div class="form-group col-sm-4">
                    <div class="col-sm-4 control-label">type</div>
                    <div class="col-sm-8">
                        <input type="text" v-model="rbacPermissionSearchForm.type" class="form-control input-sm">
                    </div>
                </div>


            </form>
        </div>
        <!--查询form ends-->

        <!--查询button start-->
        <div class="row">

            <div class="col-sm-8">
                <div class="btn-group" role="group">

                    <button class="btn btn-default" type="button" @click="rbacPermissionAddModal">
                        新增
                    </button>
                    <button class="btn btn-default" type="button">
                        批量导入
                    </button>

                    <button class="btn btn-danger" type="button" @click="rbacPermissionDeleteBatchModal()">
                        删除
                    </button>
                    <button class="btn btn-primary" type="button">
                        导出
                    </button>
                </div>
            </div>
            <div class="col-sm-4  text-right">
                <div class="btn-group" role="group">

                    <button class="btn btn-success" type="button" @click="doSearch">
                        查询
                    </button>
                    <button class="btn btn-default" type="button" @click="doClear">
                        清空
                    </button>

                </div>
            </div>
        </div>
        <!--查询button ends-->

        <div class="row">


            <!--分页 start-->
            <ul class="pagination  pagination-sm" style="margin-top: 5px; margin-bottom: 5px;">
                <!--<li class="page-item">-->
                <!--<a class="page-link" href="#"><i @click="switchToPage(1)">&laquo;</i></a>-->
                <!--</li>-->
                <li class="page-item">
                    <a href="#"  class="page-link" @click="goBack"><i>&lt;</i></a>
                </li>
                <li class="page-item" v-for="n in pageNumList" :class="{active:n == pageNow}">
                    <a href="#"  @click="switchToPage(n)" class="page-link">{{n}}</a>
                </li>
                <li class="page-item">
                    <a href="#"   class="page-link"  @click="goNext"><i>&gt;</i></a>
                </li>
                <li class="page-item">
                    <span class="badge">共 {{totalRows}} 条</span>
                </li>
                <!--<li class="page-item">-->
                <!--<a href="#"   class="page-link"><i  @click="switchToPage(totalPages)">&raquo;</i></a>-->
                <!--</li>-->
            </ul>
            <!--分页 ends-->


            <!--表格数据 start-->
            <table class="table table-hover table-striped table-bordered table-sm" style="margin-top: 5px;">
                <thead >
                <tr>
                    <th>
                        <button type="button" class="btn btn-sm" @click="fnChangeAll">全部</button>

                    </th>
                    <th>#</th>

                    <th>name</th>
                    <th>url</th>
                    <th>type</th>
                    <th>父节点</th>
                    <th>createTime</th>

                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in rbacPermissionList" @click="fnChangeStatus(index)">
                    <td><input class="form-control" disabled type="checkbox" :value="index" v-model="checkedRows"></td>
                    <td>{{(pageNow-1)*10 + index+1}}</td>

                    <td>{{item.name}}</td>
                    <td>{{item.url}}</td>
                    <td>
                        <span class="badge" v-if="item.type == 0">目录</span>
                        <span class="badge" style="background-color: #098ddf" v-if="item.type == 1">菜单</span>
                        <span class="badge" style="background-color:green" v-if="item.type == 2">按钮</span>
                    </td>
                    <td>{{item.parentName}}</td>
                    <td>{{item.createTime}}</td>
                    <td>
                        <button type="button" class="btn btn-sm  btn-primary" @click="rbacPermissionUpdateModal(item)">修改</button>
                        <button type="button"  class="btn btn-sm btn-danger"  @click="rbacPermissionDeleteOneModal(item)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--表格数据 ends-->



        </div>

    </div>

    <!--add modal start-->

    <div id="rbacPermission-detail" v-show="showFlag === 'rbacPermission-add' || showFlag === 'rbacPermission-update' || showFlag === 'rbacPermission-detail'">


        <div class="modal-footer">
            <button type="button" class="btn btn-default" @click="rbacPermissionGridModal">返回</button>
            <button type="button" class="btn btn-primary" @click="rbacPermissionAddOrUpdate">提交</button>
        </div>



        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#rbacPermissioncollapse1">
                            基本信息
                        </a>
                    </h4>
                </div>
                <div id="rbacPermissioncollapse1" class="panel-collapse collapse in">
                    <div class="panel-body">

                        <form class="form-horizontal"  role="form">

                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label">sid</label>
                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" v-model="rbacPermissionDataForm.sid">
                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label">name</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="rbacPermissionDataForm.name">
                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label">url</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="rbacPermissionDataForm.url">
                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label">type</label>
                                <div class="col-sm-9">
                                    <!--<input type="text" class="form-control" v-model="rbacPermissionDataForm.type">-->




                                    <div class="checkbox">

                                        <label class="radio-inline">
                                            <input type="radio"  v-model="rbacPermissionDataForm.type" value="0" name="vtype"><span class="badge">目录</span>
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio"  v-model="rbacPermissionDataForm.type" value="1" name="vtype"><span class="badge" style="background-color: #098ddf" >菜单</span>
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio"  v-model="rbacPermissionDataForm.type" value="2" name="vtype"><span class="badge" style="background-color:green" >按钮</span>
                                        </label>

                                    </div>


                                </div>
                            </div>

                            <div class="form-group col-sm-6" v-show="false">
                                <label for="" class="col-sm-3 control-label">parentId</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control"  v-model="rbacPermissionDataForm.parentId" id="parentId">
                                </div>
                            </div>

                            <div class="form-group col-sm-6" v-show="false">
                                <label for="" class="col-sm-3 control-label">createTime</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="rbacPermissionDataForm.createTime">
                                </div>
                            </div>



                        </form>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#rbacPermissioncollapse2">
                            父节点
                        </a>
                    </h4>
                </div>
                <div id="rbacPermissioncollapse2" class="panel-collapse collapse">
                    <div class="panel-body">

                        <form class="form-horizontal"  role="form">

                            <div class="form-group col-sm-6">
                                <ul id="uploadtree" class="ztree"></ul>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#rbacPermissioncollapse3">
                            其他2
                        </a>
                    </h4>
                </div>
                <div id="rbacPermissioncollapse3" class="panel-collapse collapse">
                    <div class="panel-body">

                        do sth 2
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!--add modal ends-->



    <!--tip start-->

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="modal-container-rbacPermission" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body"><p>{{tipMsg}}</p></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" v-show="confirmFlag" @click="rbacPermissionDelete">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!--tip ends-->

</div>
</body>
</html>


<script>

    var vm = new Vue({
        el: '#rbacPermissionApp',
        data: {

            rbacPermissionSearchForm:{},
            rbacPermissionDataForm:{},
            rbacPermissionList:[],
            perPage:10,
            pageNow:1,
            totalPages:5,
            pageNumList:[],
            totalRows:0,
            checkedRows:[],
            checked:false,
            updateFlag:false,
            showFlag:'rbacPermission-grid',
            tipMsg: '',
            confirmFlag:false,
            deleteIds:[],


            //zTree
            zNodes: [ ],
            setting:{
                check: {
                    enable: true,
                    chkStyle:'radio',
                    radioType:'all',
                    chkboxType: {"Y": "ps", "N": "ps"},


                },
                view: {
                    dblClickExpand: true,
                    showLine: true,
                    selectedMulti: false
                },
                data: {
                    key:{
                        url:'xUrl',
                    },
                    simpleData: {
                        enable: true,
                        idKey: "sid",
                        pIdKey: "parentId",
                        rootPId: ""
                    }
                },
                callback: {

                    onClick: function (event, treeId, treeNode) {
                        var zTree = $.fn.zTree.getZTreeObj(treeId);
                        zTree.checkNode(treeNode, true, true);
                        $('#parentId').val(treeNode.sid);
                    },
                }
            }



        },
        methods: {
            

//            refreshTree:function () {
//
//                $.fn.zTree.init($("#uploadtree"), this.setting, this.zNodes);
//            },

//            showDetail:function (event, treeId, treeNode) {
//
//                console.log(treeNode);
//                var zTree = $.fn.zTree.getZTreeObj("uploadtree");
//                zTree.checkNode(treeNode, true, true);
//            },

            //提示框 弹框
            popTipModal:function (msg,confirmFlag) {

                this.tipMsg = msg;
                if(!!confirmFlag){
                    this.confirmFlag = true;
                }else{
                    this.confirmFlag = false;
                }

                $('#modal-container-rbacPermission').modal('show');
            },


            //返回 主页面
            rbacPermissionGridModal:function () {

                this.showFlag = 'rbacPermission-grid';
            },

            //新增弹框
            rbacPermissionAddModal:function () {

                this.rbacPermissionDataForm = { };
                this.showFlag = 'rbacPermission-add';
                this.updateFlag = false;


                var _self = this;
                $.ajax({
                    url:'/rbacPermission/tree/',

                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            var data = dat.data;
                            _self.zNodes = data;

                            $.fn.zTree.init($("#uploadtree"), _self.setting, _self.zNodes);
                            var zTree = $.fn.zTree.getZTreeObj("uploadtree");
                            zTree.expandAll(true);
                        }
                    }
                );

            },

            //修改弹框
            rbacPermissionUpdateModal:function (item) {

                var _self = this;
                var _sid = item.sid?item.sid:item.id;
                $.ajax({
                    url:'/rbacPermission/get/' + _sid,
                    data: _self.rbacPermissionSearchForm,

                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            var data = dat.data;
                            _self.rbacPermissionDataForm = data;
                            _self.showFlag = 'rbacPermission-update';
                            _self.updateFlag = true;

                            $.ajax({
                                url:'/rbacPermission/tree/',

                            }).done(
                                function (dat) {
                                    if (dat.code == 0) {
                                        var data = dat.data;
                                        _self.zNodes = data;

                                        $.fn.zTree.init($("#uploadtree"), _self.setting, _self.zNodes);
                                        var zTree = $.fn.zTree.getZTreeObj("uploadtree");
                                        zTree.expandAll(true);
                                        var parentId = _self.rbacPermissionDataForm.parentId;
                                        var node = zTree.getNodeByParam("sid",parentId );
                                        zTree.selectNode(node,true);//将指定ID的节点选中
                                        zTree.checkNode(node,true,true);//将指定ID的节点选中
                                    }
                                }
                            );
                        }
                    }
                );
            },

            //删除一个 弹框
            rbacPermissionDeleteOneModal:function (item) {

                var _sid = item.sid?item.sid:item.id;
                this.deleteIds = [_sid];
                this.popTipModal('确定要删除选中的数据吗？',true);
            },

            //删除多个 弹框
            rbacPermissionDeleteBatchModal:function () {

                var len = this.checkedRows.length;
                if(len<=0){
                    this.popTipModal('请选择要删除的数据');
                    return false;
                }

                this.deleteIds = [];
                for(var i=0;i<len;i++){
                    var indx = this.checkedRows[i];
                    var item = this.rbacPermissionList[indx];
                    var _sid = item.sid?item.sid:item.id;
                    this.deleteIds.push(_sid);
                }
                this.popTipModal('确定要删除选中的数据吗？',true);
            },


            //删除 提交
            rbacPermissionDelete:function () {

                var _self = this;

                $.ajax({
                    url:'/rbacPermission/delete?ids='+_self.deleteIds,
                    type: "POST",
                    datType: "JSON",
                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            _self.popTipModal('操作成功！');
                            _self.switchToPage(1);

                        }else{
                            _self.popTipModal(dat.msg);
                        }
                    }
                );

            },

            fnChangeAll: function () {

                var length = this.checkedRows.length;
                if(length>0){
                    this.checkedRows = [];
                }else{
                    var size=this.rbacPermissionList.length;
                    for(var i=0;i<size;i++){
                        this.checkedRows.push(i);
                    }
                }

            },

            fnChangeStatus:function (indx) {

                var number = this.checkedRows.indexOf(indx);
                if(number> -1){
                    this.checkedRows.splice(number, 1);
                }else{
                    this.checkedRows.push(indx);
                }
            },
            doSearch:function () {
                this.switchToPage(1);
            },
            doClear:function () {
                this.rbacPermissionSearchForm={};
                this.switchToPage(1);
            },


            // 新增,修改 提交
            rbacPermissionAddOrUpdate:function () {

                var _self = this;
                var postUrl = "/rbacPermission/add";
                var _sid = this.rbacPermissionDataForm.sid?this.rbacPermissionDataForm.sid:this.rbacPermissionDataForm.id;
                if(_sid){
                    postUrl = "/rbacPermission/update";
                }


                var zTree = $.fn.zTree.getZTreeObj("uploadtree");
                var selectedNodes = zTree.getSelectedNodes();

                if(selectedNodes.length == 0){

                    _self.popTipModal('请选择所属目录');
                    return false;

                }
//                console.log(selectedNodes);
                var parentId = selectedNodes[0].sid;
                _self.rbacPermissionDataForm.parentId =parentId;

                //
                $.ajax({
                    url:postUrl,
                    data: JSON.stringify(_self.rbacPermissionDataForm),
                    type: "POST",
                    datType: "JSON",
                    contentType: "application/json"

                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            _self.popTipModal('操作成功！');

                            if(dat.data.sid){
                                _self.rbacPermissionDataForm.sid=dat.data.sid;
                            }
                            if(dat.data.id){
                                _self.rbacPermissionDataForm.id=dat.data.id;
                            }
                            _self.switchToPage(1);

                        }else{
                            _self.popTipModal(dat.msg);
                        }
                    }
                );

            },

            switchToPage:function (pageNum) {

                this.checkedRows=[];
                if( pageNum >= this.totalPages){
                    pageNum = this.totalPages;
                }
                if(pageNum <= 0 ){
                    pageNum = 1;
                }

                this.pageNow = pageNum;
                this.getDataList(pageNum);

            },


            goBack:function () {
                var nowMinPage = this.pageNumList[0];
                if(!nowMinPage ||nowMinPage <= 1){
                    return ;
                }
                var start = nowMinPage-1-10;

                this.pageNumList = [];
                for(var i= start+1;i <= nowMinPage-1;i++){

                    this.pageNumList.push(i);
                }

                var page = this.pageNumList[this.pageNumList.length -1];
                this.pageNow = page;

                var _self = this;
                this.ajaxQuery(page,_self);

            },
            goNext:function () {
                var nowMaxPage = this.pageNumList[this.pageNumList.length -1];
                if(nowMaxPage >= this.totalPages){
                    return ;
                }
                var end = nowMaxPage+10;
                if(end > this.totalPages){
                    end = this.totalPages;
                }

                this.pageNumList = [];
                for(var i= nowMaxPage+1;i <= end;i++){
                    this.pageNumList.push(i);
                }

                var page = nowMaxPage+1;
                this.pageNow = page;

                var _self = this;
                this.ajaxQuery(page,_self);

            },

            //查询
            getDataList: function (page) {

                var _self = this;
                this.ajaxQuery(page,_self);

            },
            ajaxQuery:function (page, _self) {

                _self.checkedRows=[];
                $.ajax({
                    url:'/rbacPermission/pageInfo?current='+page +'&size='+10,
                    data: _self.rbacPermissionSearchForm,

                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            var data = dat.data;
                            var dataList=data.records;
                            _self.rbacPermissionList=[];
                            for(var i in dataList){
                                _self.rbacPermissionList.push(dataList[i]);
                            }
                            _self.totalRows = data.total;
                            _self.totalPages= Math.ceil(data.total/data.size);

                            //前10页,
                            if(page <= 10){

                                _self.pageNumList = [];
                                var maxNavNum = _self.totalPages>10?10:_self.totalPages;
                                for(var i=0;i<maxNavNum;i++){
                                    _self.pageNumList.push(i+1);
                                }
                            }

                        }
                    }
                );
            }
        },



        mounted: function () {

            var _self = this;
            this.switchToPage(1);

            $.fn.zTree.init($("#uploadtree"), _self.setting, _self.zNodes);
        }
    });

</script>